<template>
  <div class="publishPrice-wrap">
    <el-row class="add-button">
      <el-button type="primary" @click="handleAdd">添加卡类型</el-button>
    </el-row>
    <el-table
      v-loading="loading"
      v-if="list.length"
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="index"
        label="序号"
        width="50"/>
      <el-table-column
        prop="id"
        label="ID"
        width="180"/>
      <el-table-column
        prop="name"
        label="名称"
        width="180"/>
      <el-table-column
        prop="duration"
        label="时长/（月）"/>
      <el-table-column
        prop="price"
        label="价格"/>
      <el-table-column
        prop="optdate"
        label="添加时间"/>
      <el-table-column>
        <template slot-scope="scope">
          <el-button type="danger" @click.stop="handleDelete(scope)">删除</el-button>
          <el-button type="primary" @click.stop="handleMaintion(scope)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="addDialog"
      :title="tilte"
      width="30%"
      center>
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth" label="设置发布费用：">
          <el-input v-model="form.price"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="设置发布名称：">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="设置发布名称：">
          <el-select v-if="month.length" v-model="monthValue" placeholder="请选择">
            <el-option
              v-for="item in month"
              :key="item.value"
              :label="item.value"
              :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleAddDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { addPrice, upDate, deletePrice, findPrice } from '@/api/basic'
export default {
  name: 'BasicPublish',
  data() {
    return {
      form: {
        price: '',
        name: ''
      },
      monthValue: '1',
      month: [],
      formLabelWidth: '120px',
      value5: '',
      addDialog: false,
      list: [],
      loading: false,
      tilte: '添加卡类型'
    }
  },
  computed: {
    tableData() {
      const result = []
      this.list.map((item, index) => {
        result.push({
          index: index + 1,
          id: item.id,
          name: item.name,
          duration: item.duration,
          price: item.price,
          updateDate: item.updateDate,
          optdate: item.optdate
        })
      })
      return result
    }
  },
  created() {
    this.initMonth()
    this.findList()
  },
  methods: {
    findList() {
      this.loading = true
      findPrice()
        .then((res) => {
          this.loading = false
          const data = res.data
          this.list = data
        }).catch((res) => {
          this.loading = false
          this.$message.warning({
            duration: 1000,
            message: '稍后再试'
          })
        })
    },
    handleSetting() {
      // replace(/[\u4e00-\u9fa5]/g, '')
      const flag = this.check()
      flag ? this.modification() : ''
    },
    check() {
      const price = this.form.price
      if (price.trim() === '') {
        this.$message.warning({
          duration: 1000,
          message: '价格不能为空'
        })
        return false
      }
      return true
    },
    initMonth() {
      const months = Array.from(new Array(36).keys())
      months.map((item) => {
        this.month.push({
          label: `选项${item + 1}`,
          value: `${item + 1}`
        })
      })
    },
    modification() {
      console.log(1)
    },
    handleAdd() {
      this.title = '添加卡类型'
      this.addDialog = true
    },
    handleAddDialog() {
      const id = this.id
      const { price, name } = this.form
      const duration = Number(this.monthValue)
      console.log(price, name, duration)
      if (this.title === '添加卡类型') {
        this.add(price, name, duration)
      } else {
        this.maintion(price, name, duration, id)
      }
    },
    handleMaintion(scope) {
      this.form.price = scope.row.price
      this.form.name = scope.row.name
      this.monthValue = scope.row.duration
      this.addDialog = true
      this.title = '修改卡类型'
      this.id = scope.row.id
    },
    maintion(price, name, duration, id) {
      upDate(price, name, duration, id)
        .then((res) => {
          if (res.success) {
            this.$message.success({
              duration: 1000,
              message: '修改成功'
            })
            this.findList()
          } else {
            this.$message.info({
              duration: 1000,
              message: res.msg
            })
          }
        })
    },
    add(price, name, duration) {
      addPrice(price, name, duration)
        .then((res) => {
          if (res.success) {
            this.$message.success({
              duration: 1000,
              message: '添加成功'
            })
            this.findList()
          } else {
            this.$message.info({
              duration: 1000,
              message: res.msg
            })
          }
        }).catch((res) => {
          this.$message.warning({
            duration: 1000,
            message: '稍后再试'
          })
        })
    },
    handleDelete(scope) {
      const { id } = scope.row
      deletePrice(id)
        .then((res) => {
          if (res.success) {
            this.$message.success({
              duration: 1000,
              message: '删除成功'
            })
            this.findList()
          }
        }).catch((res) => {
          this.$message.wraning({
            duration: 1000,
            message: '请稍后再试'
          })
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.publishPrice-wrap {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .input-price {
    width: 200px;
  }
  .add-button {
    text-align: right;
    margin-bottom: 20px;
  }
  .row {
    padding-left: 120px;
    box-sizing: border-box;
    .btn {
      width: 200px;
    }
  }
}
</style>

